// src/App.tsx
import /*React, */{ useState } from 'react';
import { Container, Grid, GridItem, Heading, Box } from '@chakra-ui/react';
import { ImageUpload } from './components/ImageUpload';
import { Pixelator } from './components/Pixelator';
import { ParameterControls } from './components/ParameterControls';
import type { PixelationParams, Palette } from './utils/pixelator';
// 新增：导入日志下载按钮
import { DebugLogButton } from './components/DebugLogButton';

function App() {
  const [uploadedImage, setUploadedImage] = useState<string | null>(null);
  // const [processedImage, setProcessedImage] = useState<string | null>(null);
  const [params, setParams] = useState<PixelationParams>({
    pixelSize: 4,
    colorDepth: 4,
    useDithering: false
  });
  const [selectedPalette, setSelectedPalette] = useState<Palette>();

  const handleImageUpload = (imageUrl: string) => {
    setUploadedImage(imageUrl);
    // setProcessedImage(null);
  };

  // const handleProcessingComplete = (imageUrl: string) => {
  //   setProcessedImage(imageUrl);
  // };
    const handleProcessingComplete = () => {
  };

  return (
    <Container maxW="container.xl" py={8}>
      <DebugLogButton />
      <Heading textAlign="center" mb={8} color="blue.600">
        Pixify - 像素艺术生成器
      </Heading>

      <Grid templateColumns={{ base: '1fr', lg: '1fr 2fr' }} gap={8}>
        <GridItem>
          <Box position="sticky" top={4}>
            <ImageUpload onImageUpload={handleImageUpload} />
            <ParameterControls
              params={params}
              selectedPalette={selectedPalette}
              onParamsChange={setParams}
              onPaletteChange={setSelectedPalette}
            />
          </Box>
        </GridItem>

        <GridItem>
          <Pixelator
            imageUrl={uploadedImage || ''}
            params={params}
            palette={selectedPalette}
            onProcessingComplete={handleProcessingComplete}
          />
        </GridItem>
      </Grid>
    </Container>
  );
}

export default App;
